<template>
	<head>
	   <!--<< Required meta tags >>-->
	   <meta charset="UTF-8">
	   <meta http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
	   <meta name="author" content="NextGenerationDev">
	   <!--<< Title >>-->
	   <title>NextAI - NextGeneration AI HTML Template</title>
	   <!--<< Favcion >>-->
	   
	   <!--<< Bootstrap min.css >>-->
	   <link rel="stylesheet" href="static/css/bootstrap.min1.css">
	    <!--<< All min.css >>-->
	    <link rel="stylesheet" href="static/css/all.min.css">
	   <!--<< Main.css >>-->
	   <link rel="stylesheet" href="static/css/main.css">
	</head>
	<!-- fullscreen search bar area start here -->
	
	<!--<< Scroll End >>-->
	
	<!-- ========== mouce area start here ========== -->

	<!-- ========== mouce area end here ========== -->
	
	<!--<< Banner Section Here >>-->
	<section class="banner__section" id="pic1" style="height: 800px;">
	   <div class="container">
	      <div class="row g-4 align-items-center" >
	         <div class="col-xl-6 wow fadeInUp" data-wow-delay=".3s" >
	            <div class="banner__content" >
					
	               <h1 style="font-size: 4.2vw;">
	                  慧眼析影
	               </h1 style="font-size: 4.2vw;">
				   <h1>&nbsp&nbsp&nbsp&nbsp&nbsp精准医疗助手</h1>
	               <p style="font-size: 1.9vw;">
						AI赋能医疗，实现一站式智能阅片。
	               </p>

	            </div>
	         </div>
	         <div class="col-xl-6 wow fadeInUp" data-wow-delay=".5s">
	            <div class="banner__thumb">
	               <!-- <img src="static/picture/hero.png" alt="banner__img"> -->
	            </div>
	         </div>
	      </div>
	   </div>
	</section>
	<!--<< Banner Section End >>-->
	
	<!--<< About Section Here >>-->

	<!--<< About Section End >>-->
	
	<!--<< Service Section Here >>-->

	<!--<< Service Section End >>-->
	<section class="feature__section section__padding overhid" id="p3">

			
		
	   <div class="container" >
	      
	         
			<p class="titl">模型先进</p>
	      
			<p class = "description">CTCL-Net巧妙地结合了CNN和Transformer的优势，高效地提取数据特征，同时引入对比学习来增强模型泛化能力，达到了SOTA的效果，在肺部数据集上到达了98%的Dice系数。</p>
			<img src="../static/image/ai.png" style="width: 90%; height: 90%; margin-left: 50px;">
		</div>
	   
	   
	</section>
	<section class="feature__section section__padding overhid" id="p3">
		<div class="container" >
		   
		      
			<p class="titl">功能强大</p>
		   
			<p class = "description">我们实现辅助阅片，图像处理，图像分割等多种功能，提供高效，快捷的一站式解决方案。</p>
			<img src="../static/image/des_2.png	" style="width: 90%; height: 90%; margin-left: 50px;">
		</div>
	</section>
	<section class="feature__section section__padding overhid" id="p3">
		<div class="container" >
		   
		      
			<p class="titl">通用适配</p>
		   
			<p class = "description">模型支持多种情景下的医学图像数据，包括肺部(CT图像)，细胞数据(显微图像)，皮肤数据(自然图像)等。</p>
			<img src="../static/image/des_3.png	" style="width: 90%; height: 90%; margin-left: 50px;">
		</div>
	   
	</section>
<!-- 	<section class="feature__section section__padding overhid" id="p3">
		<div class="container" >
		   
		      
			<p class="titl">通用适配</p>
		   
			<p class = "description">模型支持多种情景下的医学图像数据，包括肺部(CT图像)，细胞数据(显微图像)，皮肤数据(自然图像)等。</p>
			<div style="display: flex;">
				<img src="../static/image/test.png" class="des_img" >
				<img src="../static/image/lesion_002.png" class = "des_img">
				<img src="../static/image/lesion_003.png" class = "des_img">
			</div>
			
		</div>
	   
	</section> -->
	<!--<< Counter Section Here >>-->
	<footer class="footer-section">
	   
	   <div class="footer-bottom">
	     <div class="container">
	      <div class="footer-bottom-wrap">
	         <p>
	            Copyright &copy; 2024.Company name All rights reserved.
	         </p>
	         <ul class="footer-bottom-link">
	            <li>
	               <a href="#0">
	                  Privacy
	               </a>
	            </li>
	            <li>
	               <a href="#0">
	                  Terms &amp; Conditions
	               </a>
	            </li>
	         </ul>
	      </div>
	     </div>
	   </div>
	</footer>
</template>

<script>
</script>

<style>
		
	.des_img{
		width: 32%; height: 50%; margin-left: 50px;
	}
	.titl{
		text-align: left;
		font-size: 56px;
		font-weight: bold;
		margin-bottom: 2%;
	}
	.description{
		text-align: left;
		/* font-size: 22px; */
		font-size: 38px;
		margin-bottom: 2%;
	}
	#pic1{
		background-image: url("../static/image/p3.png");
		background-position: center center;
		/* 背景图不平铺 */
		
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		background-size:cover; background-repeat: no-repeat;
		/* 让背景图基于容器大小伸缩 */
		/* background-size: cover; */
			
		/* object-fit: ; */
	}
	#p3{
		/* background-image: url("../static/image/p2.jpg"); */
		  /* background-color: rgba(124, 124, 124, 0.8); */
			/* opacity: 0.8; */
		background: #0c1d20;
		background-position: center center;
		
		/* 背景图不平铺 */
		    
		background-size:cover; background-repeat: no-repeat;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		
		/* 让背景图基于容器大小伸缩 */
		/* background-size: cover; */
		
		/* object-fit: ; */
	}
		

</style>